<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" />
    <title>ahuigo的自留地</title>
    <meta name="author" content="ahuigo">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js"></script>
    <script src="js/marked.js"></script>
</head>

<script>
	marked.setOptions({
		gfm: true,
		breaks: true,
		latexRender: katex.renderToString.bind(katex),
	});

    $ = document.querySelector.bind(document)
    function mdRender(){
        var text = $('#input').value
        $('#preview').innerHTML = marked (text);
    }
	window.onload=mdRender
</script>
</head>
<body>
<textarea id="input" oninput="mdRender()"  "autofocus">
### Latex Example By [AHUIGO](/b)

$\displaystyle \sum_i^j$

$f(x)=sin^2x+cos^2x\\
\qquad = 1$ 

$\binom{n}{k}=\mathrm{C}_n^k$

</textarea>
<div id="preview"> </div>

<style>
em{ color:red}
body{display:flex}
textarea{width:50%;min-height:600px}
#preview{
 padding: 0 1em; margin: 0em 1em; overflow:auto; 
}
pre{
padding: 2em 1em; margin: 0 2em 2em 0; border-radius: 1em;
line-height: 2em;
width:90%;
background: #f5f2f0;
}
</style>
</body>
</html>
